<template>
    <div id="index">
        <titleVue @close="close" :title="title_text"></titleVue>
        <div class="bottom">

            <div id="container" ref="container" @scroll="containerScroll">

                <div class="sticky_p">
                    <div class="sticky">
                        <div class="top_search">
                            <van-search v-model="searchForm.name" @search="onSearch" :clearable="false" placeholder="搜索闲置物品"  >
                            </van-search>
                            <div @click="onSearch" class="btnsearch">搜索</div>
                        </div>
                        <div class="top_tab">
                            <div @click="openSelect(-1, $event)">
                                <div>{{ searchForm.min_date ?searchForm.min_date:'发布时间' }}<div class="sj"></div>
                                </div>
                            </div>
                            <div @click="openSelect(0, $event)">
                                <div>{{ searchFormLabel.area  ?searchFormLabel.area:'所在区域' }}<div class="sj"></div>
                                </div>
                            </div>
                            <div @click="openSelect(1, $event)">
                                <div>{{ searchFormLabel.p_type ?searchFormLabel.p_type:'物品类型' }}<div class="sj"></div>
                                </div>
                            </div>
                            <div @click="openSelect(2, $event)">
                                <div>{{ searchFormLabel.jy_type  ?searchFormLabel.jy_type:'交易类型' }}<div class="sj"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list" ref="list" style="min-height: calc(100% - 14.5rem);">
                        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                            <van-list v-if="dataList.length > 0" v-model="loading" :finished="finished"
                                      finished-text="没有更多了" @load="onLoad" :error.sync="error" error-text="请求失败,点击查询加载">
                                <van-cell v-for="(item, index) in dataList" :key="item.id" class="card"
                                          :style="(index + 1) % 2 === 0 ? 'margin-left: 0.8rem;' : ''" @click="detailClick(item)">
                                    <div style="height: 100%;">
                                        <div class="card_top_img" style="overflow: hidden;">
                                            <img v-if="!item.imgkeys" src="../../assets/images/pro.png" height="100%" width="100%" />
                                            <img v-else :src="ceph(item.imgkeys.split(',')[0])"  width="100%" />
                                        </div>
                                        <div class="card_content">
                                            <div>{{ item.name }}</div>
                                            <div style="color:#f9b452">价格 <span>{{ item.sale_price || 0 }}元</span></div>
                                            <div>
                                                <img src="../../assets/images/pro.png" height="100%" width="100%" style="height: 2rem;width: 2rem;border-radius: 50%;" />

                                                <span style="margin-left:.4rem">{{ item.create_user }}</span></div>
                                            <div class="tag">
                                                <!-- <span style="background-color: #8ed9a2;">移互部</span> -->
                                                <span style="background-color: #f0a6c7;margin-left: .4rem;">{{ item.area || ' ' }}</span>
                                                <span style="background-color: #6dc9fc;margin-left: .4rem;">{{ item.jy_type || ' ' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="isEnd" v-if="item.status === '1'">
                                        <div class="end_text">
                                            交易成功
                                        </div>
                                    </div>
                                </van-cell>
                            </van-list>
                            <van-empty v-else description="暂无物品" />
                        </van-pull-refresh>
                    </div>
                </div>

            </div>
            <bottomMenu/>
        </div>

        <!-- 全部  弹窗-->
        <van-popup v-model="query_show" position="bottom">
            <van-picker v-if="currentOpen != -1" show-toolbar :columns="queryList[currentOpen]" @confirm="queryChange"
                        @cancel="query_show = false" />
            <van-datetime-picker v-else @confirm="queryChange" @cancel="query_show = false" type="date" title="选择年月日"
                                 :max-date="new Date()" :min-date="new Date(2023,0,1)" />
        </van-popup>


    </div>
</template>

<script>

import { Toast } from 'vant';
export default {
    name: "TagPage1",
    components: {

    },
    inject: ['$apiUrl', '$headImgUrl'],
    data() {
        return {
            title_text: "互助闲鱼",
            searchForm: {
                name: null,

                // tel: JSON.parse(util.getCookie("emp_data")).telNum
            },
            searchFormLabel: {

            },
            queryType: {
                '-1': 'min_date',
                '0': 'area',
                '1': 'p_type',
                '2': 'jy_type',
            },
            dataList: [
            ],
            loading: false,
            finished: false,
            refreshing: false,
            error: false,
            page: {
                size: 16,
                page: 0
            },
            lastLetter: {},
            query_show: false,
            dept_list: [
            ],
            count: {

            },
            queryList: [
                // [
                //     '黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '浦东新区', '闵行区', '宝山区', '嘉定区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'
                // ],

                // ['交易', '交换', '赠送'],
                // ['书籍', '食品', '服装', '箱包', '数码', '电器', '母婴', '其它闲置'],
            ],
            currentOpen: null,

        }
    },

    mounted() {
        this.onLoad();
        this.selectQueryDic();
        window.viewWillAppear = () => {
            this.onLoad(true);
        };
    },
    methods: {
        close() {// 关闭当前窗口
            this.va.close();
        },
        onSearch() {
            this.onLoad(true);
        },
        containerScroll(e) {
            let el = e.currentTarget;

            if(el.scrollTop == 0) {
                this.$refs.list.style['min-height'] = 'calc(100% - 14.5rem)'
            }else if(el.scrollTop + el.clientHeight + 10 > el.scrollHeight){
                this.$refs.list.style['min-height'] = 'calc(100% - 4.5rem)'
            }
        },
        openSelect(tab, event) {
            this.currentOpen = tab;
            this.query_show = true;
            event.stopImmediatePropagation()
        },

        selectQueryDic() {
            this.axios.post('app/product/queryDic', ['area','jy_type','p_type'] ).then(( {data: res} ) => {
                if (res && res.success) {
                    this.queryList = Object.values(res.data);
                    this.queryList.forEach(item=>{
                        item.unshift({text: "全部", value: undefined})
                    })
                }

            }).catch(() => {
                Toast("查询条件初始化失败")
            })

        },

        onLoad(reload) {
            if (reload || this.refreshing) {
                this.loading = true;
                this.page.page = 0;

            }
            this.axios.post('app/product/queryProductList', this.searchForm , { params: this.page }).then(( {data: res} ) => {
                if (res && res.success) {
                    let list = res.data.content;
                    if (!reload && !this.refreshing) {
                        list = this.dataList.concat(list)
                    }
                    if (list.length < this.page.size) {
                        this.finished = true;
                    }
                    this.page.page++;
                    this.error = false;
                    this.dataList = list;
                } else {
                    this.error = true;
                }

            }).catch(() => {
                this.error = true;
            }).finally(() => {
                this.loading = false;
                if (this.refreshing) {
                    this.refreshing = false;
                }
            })
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            this.searchForm = {};
            this.searchFormLabel = {};
            // 重新加载数据
            this.onLoad();
        },

        showDeptSelect() {
            this.query_show = true;
        },
        queryChange(val) {
            if(this.currentOpen === -1) {
                this.searchForm[this.queryType[this.currentOpen]] =  new Date(val).format('yyyy-MM-dd');
            }else {
                this.searchFormLabel[this.queryType[this.currentOpen]] = val.value?val.text:null;
                // this.searchForm[this.queryType[this.currentOpen]] = val.value;
                this.searchForm[this.queryType[this.currentOpen]] = val.value?val.text:null;

            }

            this.query_show = false;
            this.onLoad(true)
        },
        detailClick(item) {
            if(item.status === '1') {
                return;
            }
            //item.zanState = zanState;
            window.open("#/app/detailPage?id=" + item.id);
            //window.detail = item;
        },

    }
};
</script>
<style scoped>
#index {
    height: 100%;
    font-size: 1rem;
}

.bottom {
    height: calc(100% - 2.75rem);
    position: relative;
    overflow: hidden;
    background: url(../../assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
    top: -2px;
}

#container {
    height: calc(100% - 3.2rem);
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100% + .4rem);
    position: relative;
    /* background: #ecf8fe; */
}

#container .card .card_top_img {
    height: 50%;
}

#container .card .card_content {
    padding: 0 .64rem .4rem;
    font-size: .8rem;
    line-height: 1.2;
}

#container .card .card_content>div {
    margin-top: .6rem;
    font-weight: bold;

}

#container .card .tag {
    color: #fff;

}

#container .card .tag>span {
    /* display: inline-block; */
    /* height: 1.2rem; */
    width: 28%;
    line-height: 1.2rem;
    padding: .2rem .4rem;
    text-align: center;
}

#container .card>div {
    height: 100%;
}

.app_top {
    height: 10rem;
}

#container .sticky {
    /* height: calc(100% - 10rem); */
    position: sticky;

    top: -2px;
    padding: 0 1rem 0 .6rem;
    background: #ecf8fe;
    padding-top: .4rem;
}
#container  .sticky_p {
    margin-top: 10rem;
    height: 100%;
    position: relative;
}
#container .top_tab {
    margin-top: .4rem;
    height: 2rem;
    line-height: 2rem;
    font-size: .8rem;
    display: flex;
    font-weight: bold;
    justify-content: space-between;

}

#container .top_tab .sj {
    border-top: .6rem solid #f6960e;
    border-left: .4rem solid transparent;
    border-right: .4rem solid transparent;

    display: inline-block;
    margin-left: .2rem;
}

#container .top_search {
    position: relative;
}

#container .top_search>>>.van-search {
    padding: 0;
}

#container .btnsearch {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 1rem;
    width: 3.2143rem;
    height: 1.4rem;
    text-align: center;
    border-radius: 0.5rem;
    background-color: #97C0FB;
    color: #f7f7f7;

    line-height: 1.4rem;
    font-size: .8rem;
}

#container .top_search>>>.van-search__content {
    border-radius: 10px;
}

#container .top_search>>>.van-search {
    background: transparent;
    padding-left: 0;
}



#container .list {
    background: #ecf8fe;
    width: 100%;
    transition: all 1s;
    padding: .8rem 1rem 0 .6rem;
    overflow-y: auto;
    position: sticky;
}

#container .list .card {
    width: calc(50% - .4rem);
    display: inline-block;
    height: 16.4rem;
    border-radius: .4rem;
    padding: 0;
    position: relative;
}
.isEnd {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #eabcbc;
    opacity: .8;
    top: 0;
    z-index: 3;
}
.isEnd .end_text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-style: oblique;
}
.bottom .list .vant-list {
    overflow: hidden;

}



.list>>>.van-list .van-list__loading::before {
    content: '';
    display: block;
    clear: both;
}

.list>>>.van-list .van-list__error-text::before {
    content: '';
    display: block;
    clear: both;
}

.list>>>.van-list .van-list__finished-text::before {
    content: '';
    display: block;
    clear: both;
}

.list>>>.van-list__error-text,
.list>>>.van-list__finished-text,
.list>>>.van-list__loading {
    font-size: .8rem;
}

.list>>>.van-pull-refresh {
    min-height: 100%;
    position: absolute;
    width: calc(100% - 1.6rem);
}
</style>
